<template>
	<div>
		<div class="navtwo-navcontainer">
			<commonNav :flag="flag"></commonNav>
		</div>
		<div class="nav-two-bottom">
			<div class="navleft">
				<navleft :snavlist="snav_list" :changeComponents="changeComponents"></navleft>
			</div>
			<div class="componentsContainer">
				<transition mode="out-in">
					<component :snavId="snavId" :is="selectComponent"></component>
				</transition>
			</div>
		</div>
	</div>
</template>

<script>
import commonNav from "../common/nav.vue";
import navleft from "../common/leftnav.vue";
import usermanage from "../navtwo/usermanage/usermanage.vue";
import navmanage from "../navtwo/navmanage/navmanage.vue";
import groupmanage from "../navtwo/groupmanage/groupmanage.vue";
import permissionmanage from "../navtwo/permissionmanage/permissionmanage.vue";
import logmanage from "../navtwo/logmanage/logmanage.vue";
import iconmanage from "../navtwo/iconmanage/iconmanage.vue";
import deparmanage from "../navtwo/deparmanage/deparmanage.vue";
import blacklistmanage from "../navtwo/blacklistmanage/blacklistmanage.vue";
export default {
	data() {
		return {
			snav_list: [],
			flag: 1,
			selectComponent: null,
			snavId: null
		};
	},
	methods: {
		// 获取二级菜单
		get_snav(flag) {
			let arr = JSON.parse(window.localStorage.getItem("basenav", "{}"));
			if (arr.length > 0) {
				arr.forEach((item, index) => {
					if (flag == index) {
						this.$ajax
							.get("snav/?parentid=" + item.pk)
							.then(res => {
								if (res.data.results.length > 0) {
									this.snav_list = res.data.results;
									this.snavId = this.snav_list[0].pk;
									this.changeComponents(0);
								}
							});
						return false;
					}
				});
			}
		},
		// 左导航子组件调用的方法
		changeComponents(indexs) {
			let comps = [
				"usermanage",
				"navmanage",
				"groupmanage",
				"permissionmanage",
				"logmanage",
				"iconmanage",
				"deparmanage",
				"blacklistmanage"
			];

			comps.forEach((item, index) => {
				if (indexs == index) {
					this.selectComponent = item;
					this.snavId = this.snav_list[index].pk;
				}
			});
		}
	},
	created() {
		this.get_snav(this.flag);
		// this.changeComponents(0);
	},
	components: {
		commonNav,
		navleft,
		usermanage,
		navmanage,
		groupmanage,
		permissionmanage,
		logmanage,
		iconmanage,
		deparmanage,
		blacklistmanage
	}
};
</script>

<style lang="scss" scoped>
.nav-two-bottom {
	margin-top: 63px;
	display: flex;
	.componentsContainer {
		padding: 8px 15px;
		width: 84%;
	}
}
.v-enter {
	opacity: 0;
	transform: translateX(-10%);
}

.v-leave-to {
	opacity: 0;
	transform: translateX(10%);
}

.v-enter-active,
.v-leave-active {
	transition: all 0.3s ease;
}
</style>